<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Weather</title>
    <link rel="stylesheet" href="./vendor/css/photon.css" media="screen" charset="utf-8">
    <link rel="stylesheet" href="./index.css" media="screen" charset="utf-8">
    <script charset="utf-8">require('./index')</script>
  </head>
  <body>
    <div class="header-arrow"></div>
    <div class="window">
      <header class="toolbar toolbar-header">
        <h1 class="title">The Weather <span class="js-update-time"></span></h1>
      </header>

      <div class="window-content">
        <div class="pane">

          <div class="summary js-summary">Loading&hellip;</div>

          <div>
            <div class="column">
              <div class="reading js-temperature">&nbsp;</div>
              <div class="description">temperature</div>
            </div>
            <div class="column">
              <div class="reading js-apparent">&nbsp;</div>
              <div class="description">feels like</div>
            </div>
          </div>

          <div>
            <div class="column">
              <div class="reading js-wind">&nbsp;</div>
              <div class="description">wind speed</div>
            </div>
            <div class="column">
              <div class="reading js-wind-direction">&nbsp;</div>
              <div class="description">wind direction</div>
            </div>
          </div>

          <div>
            <div class="column">
              <div class="reading reading js-humidity">&nbsp;</div>
              <div class="description">humidity</div>
            </div>

            <div class="column">
              <div class="reading js-dewpoint">&nbsp;</div>
              <div class="description">dew point</div>
            </div>
          </div>

          <div>
            <div class="column">
              <div class="reading js-visibility">&nbsp;</div>
              <div class="description">visibility</div>
            </div>

            <div class="column">
              <div class="reading js-cloud-cover">&nbsp;</div>
              <div class="description">cloud cover</div>
            </div>
          </div>

          <div>
            <div class="column">
              <div class="reading js-precipitation-chance">&nbsp;</div>
              <div class="description">precipitation</div>
            </div>

            <div class="column">
              <div class="reading js-precipitation-rate">&nbsp;</div>
              <div class="description">inches per hour</div>
            </div>
          </div>

        </div>
      </div>

      <footer class="toolbar toolbar-footer">

        <div class="footer-link">
          Powered by <a href="http://forecast.io">Forecast</a>
        </div>

        <div class="toolbar-actions pull-right">
          <div class="btn-group">
            <button class="btn btn-default js-refresh-action">
              <span class="icon icon-arrows-ccw js-refresh-action" title="Refresh"></span>
            </button>

            <button class="btn btn-default js-quit-action">
              <span class="icon icon-cancel js-quit-action" title="Quit"></span>
            </button>
          </div>
        </div>

      </footer>
    </div>
  </body>
</html>
